<template>
	<view class="bgColor" v-if="detail">
		<watermark></watermark>
		<tool-list-wx :list="list3" @itemClick="itemClick3"></tool-list-wx>
		<view class="wxgroupInfo">
			<view class="xw-tool-list">
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">群聊邀请确认</text>
						<switch color="#05C160" :checked="Banedtop" @change="switchChange($event, 'yqqr')" style="transform:scale(0.75);" />
					</view>
					<view style="padding: 0 25rpx 25rpx 25rpx;color: #999;font-size: 28rpx;">启用后，群成员需群主或群管理员确认才能邀请朋友进群</view>
				</view>
				<tool-list-wx v-if="Banedtop" :list="listson" @itemClick="goGroupApply"></tool-list-wx>
			</view>
			<view class="xw-tool-list">
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">群禁言</text>
						<switch color="#05C160" :checked="Banedjin" @change="switchChange($event, 'qjy')" style="transform:scale(0.75);" />
					</view>
					<view style="padding: 0 25rpx 25rpx 25rpx;color: #999;font-size: 28rpx;">启用后，只有群主及群管理员可以在群聊中发言</view>
				</view>
			</view>
			<view class="xw-tool-list">
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">允许群成员互相加好友</text>
						<switch color="#05C160" :checked="BanedAddfirend" @change="switchChange($event, 'jhy')" style="transform:scale(0.75);" />
					</view>
					<view style="padding: 0 25rpx 25rpx 25rpx;color: #999;font-size: 28rpx;">启用后，从群聊资料页进入群成员详情，如果两人不是好友，将显示【添加到通讯录】按钮</view>
				</view>
			</view>
			<view v-if="detail.user_type == 'root'" class="xw-tool-list">
				<view class="xw-tool-list-content" @click="jiesan">
					<view class="xw-tool-btn-item"><view class="xw-tool-btn-text" style="color: #FF5A5F;">解散该群</view></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import detailVue from '../personInfo/detail.vue';
export default {
	data() {
		return {
			groupId: '',
			detail: {}
		};
	},
	computed: {
		list3() {
			return [
				{
					title: '群管理员',
					path: '#'
				}
			];
		},
		listson() {
			return [
				{
					title: ' - 邀请进群申请',
					path: '#'
				}
			];
		},
		Banedtop() {
			return this.detail.yaoqing_queren ? true : false;
		},
		Banedjin() {
			return this.detail.is_forbid ? true : false;
		},
		BanedAddfirend() {
			return this.detail.is_add_firend ? true : false;
		}
	},
	onLoad(e) {
		this.groupId = e.groupId;
	},
	onShow() {
		this.getInfo(this.groupId);
	},
	methods: {
		// 解散群聊
		jiesan() {
			uni.showModal({
				title: '提示',
				content: '确认解散群聊吗？',
				success: res => {
					if (res.confirm) {
						var formData = {};
						formData = {
							groupId: this.detail.groupId
						};
						this.$http.request({
							url: '/group/removeGroup',
							method: 'POST',
							data: JSON.stringify(formData),
							success: res => {
								if (res.data.code == 200) {
                                    var content = '你已解散群聊';
        							this.$fc.pushAlertMsg({
            							msgContent: content, 	//msg内容
            							windowType: 'GROUP', 	//聊天室类型 SINGLE GROUP
            							userId: this.detail.groupId, 	//ID
        							});
                                    this.$fc.ToastBack('解散成功',2);
								}
							}
						});
					}
				}
			});
		},
		switchChange(e, type) {
			var yn = e.detail.value ? '1' : '0';
			var url, formData, ynText;
			switch (type) {
				case 'yqqr':
					url = '/group/editYaoqren';
					formData = {
						groupId: this.groupId,
						status: yn
					};
					ynText = e.detail.value ? '已开启群聊邀请确认' : '群聊邀请确认已关闭';
					break;
				case 'qjy':
					url = '/group/editQunforbid';
					formData = {
						groupId: this.groupId,
						status: yn
					};
					ynText = e.detail.value ? '已开启群禁言功能' : '群禁言功能已关闭';
					break;
				case 'jhy':
					url = '/group/editQunaddfirend';
					formData = {
						groupId: this.groupId,
						status: yn
					};
					ynText = e.detail.value ? '已允许群成员间互相加好友' : '已禁止群成员间互相加好友';
					break;
				default:
					break;
			}
			this.$http.request({
				url: url,
				method: 'POST',
				data: JSON.stringify(formData),
				success: res => {
					if (res.data.code == 200) {
						if(type == 'yqqr'){
							this.detail.yaoqing_queren = formData.status * 1;
						}
						// uni.showToast({
						// 	title: ynText,
						// 	icon: 'none'
						// });
					}
				}
			});
		},
		goGroupApply(){
			uni.navigateTo({
				url: 'applyAddGroup?groupId=' + this.groupId
			});
		},
		itemClick3(e, i) {
			switch (i) {
				case 0:
					uni.navigateTo({
						url: 'groupManageList?groupId=' + this.groupId
					});
					break;
				default:
					break;
			}
		},
		getInfo(e) {
			//详情
			this.$http.request({
				url: '/group/getInfo/?id=' + e,
				success: res => {
					if (res.data.code == 200) {
						this.detail = res.data.data;
					}
				}
			});
		}
	}
};
</script>

<style scoped>
/* #ifdef APP-PLUS */
.bgColor {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ededed;
	z-index: -1;
	overflow: auto;
}
/* #endif */
/* #ifdef H5 */
page {
	background: #ededed;
}
/* #endif */

.xw-tool-list {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	margin-bottom: 18rpx;
}

.xw-tool-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 26rpx 24rpx;
	border-bottom: 1px #eee solid;
}
.xw-tool-list-content .xw-tool-item {
	border: none;
}

.xw-tool-text {
	margin-right: auto;
}

.xw-tool-btn-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 34rpx 44rpx;
	border-bottom: 1px #eee solid;
	font-weight: bold;
	color: #5f698c;
}
.wxgroup-list {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}
.wxgroup-list-item {
	width: 20%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wxgroup-list-icon .wxfont {
	color: #999;
	font-size: 46rpx;
}
.wxgroup-list-img {
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
}
.wxgroup-list-icon {
	display: flex;
	flex-direction: column;
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
	align-items: center;
	justify-content: center;
	border: 1px #ddd dashed;
}
.wxgroup-list-text {
	text-align: center;
	width: 105rpx;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xw-tool-else .text {
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 520rpx;
}
</style>
